<template>
	 <!-- 修改昵称 -->
    <el-dialog :title="$root.lang.userinfo.editNickname.title" :visible.sync="showDialog" @close="closeDialog" width="50%"  :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form @submit.native.prevent class="change-password" :model="form"  ref="form" :rules="nicknameRules" size="small" label-position="right" :label-width="formLabelWidth">
        <el-form-item :label="$root.lang.userinfo.nickname" :label-width="formLabelWidth" prop="nickname">
          <el-input  v-model="form.nickname" @keyup.enter.native="onSubmit()" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="dialog-btn" @click="onSubmit()" :loading="loading" type="primary" >{{ $root.lang.userinfo.editNickname.confirm }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
</template>

<script>
export default {
  name: 'EditNickname',
  data() {
    return {
    	loading:false,
    	showDialog: this.show,
    	formLabelWidth: '100px',

    	form: {
    		nickname: this.nickname
    	},
    	nicknameRules: {
        nickname: [
          { required: true, message: this.$root.lang.userinfo.editNickname.editRule.newNickname, trigger: 'blur' }
        ],
      },
    }
  },
  watch: {
    show: function (value) {
      if(this.$refs['form']) this.$refs['form'].resetFields()
      this.showDialog = value
      this.form.nickname = this.nickname
  	},
    nickname: function(value) {
      this.form.nickname = value
    }
  },
  props: {
  	show: {
      type: Boolean,
      default: false
    },
    nickname: {
    	type: String,
    	default: ''
    }
  },
  methods: {
  	closeDialog() {
      this.$emit('editReceive',{
        key: 'changeNickname',
        value: this.showDialog
      })
    },
    onSubmit() {
    	this.$refs['form'].validate((valid) => {
        if(valid) {
        	this.editInfo()
        }else{
          return false
        }
      })
    },
  	editInfo () {
      this.loading = true
      this.request({
        url: '/api/user/update/nickname',
        method: 'post',
        data: this.$root.optionProcess(this.form)
      }).then(response => {
        this.loading = false
        this.$message({
          message:  this.$root.lang.confirm.editSuccess,
          type: 'success',
          duration: 3 * 1000
        })
        this.showDialog = false
				this.$emit('reload')
      }).catch(error => {
        this.loading = false
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    },
  },
  created() {

  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>